import {Component} from '@angular/core';
import {NzPlacementType} from 'ng-zorro-antd/dropdown';
import {Router} from '@angular/router';

@Component({
  // tslint:disable-next-line:component-selector
  selector: 'nz-demo-layout-top',
  template: `
    <nz-layout>
      <nz-header>
        <div class="logo"></div>
        <span class="font1">WeAutomate</span>
        <span style="border: 1px solid #494c52;margin-left:20pt;margin-right: 20pt "></span>
        <a class="font2" nz-dropdown nzTrigger="click" [nzDropdownMenu]="menu1">
          <i nz-icon nzType="wifi"></i>
          内网IP地址
          <i nz-icon nzType="down"></i>
        </a>
        <nz-dropdown-menu #menu1="nzDropdownMenu">
          <ul nz-menu nzSelectable style="background-color: #001529">
            <li class="font2" nz-menu-item *ngFor="let position of list2">{{position}}</li>
          </ul>
        </nz-dropdown-menu>
        <span style="float: right">
          <ng-container>
        <button class="font2" nz-button nz-dropdown [nzDropdownMenu]="menu2" [nzPlacement]="'bottomRight'"
                style="background-color: #001529;border: 0px;">系统应用</button>
        <nz-dropdown-menu #menu2="nzDropdownMenu">
          <ul nz-menu style="background-color: #001529">
            <li class="font2" nz-menu-item *ngFor="let position of list1">{{position}}</li>
          </ul>
        </nz-dropdown-menu>
      </ng-container>
          <ng-container>
        <button class="font2" nz-button nz-dropdown [nzDropdownMenu]="menu3" [nzPlacement]="'bottomCenter'"
                style="background-color: #001529;border: 0px;">自动化应用</button>
        <nz-dropdown-menu #menu3="nzDropdownMenu">
          <ul nz-menu style="background-color: #001529">
            <li class="font2" nz-menu-item *ngFor="let position of list1">{{position}}</li>
          </ul>
        </nz-dropdown-menu>
      </ng-container>
           <ng-container>
        <button class="font2" nz-button nz-dropdown [nzDropdownMenu]="menu4" [nzPlacement]="'bottomLeft'"
                style="background-color: #001529;border: 0px;">AL应用</button>
        <nz-dropdown-menu #menu4="nzDropdownMenu">
          <ul nz-menu style="background-color: #001529">
            <li class="font2" nz-menu-item *ngFor="let position of list1">{{position}}</li>
          </ul>
        </nz-dropdown-menu>
      </ng-container>
        <span class="font2"  style="margin-left:20pt;"> User_name </span>
        <span class="font2" style="border: 1px solid #494c52;margin-left:20pt ; "></span>
          <i nz-icon [nzType]="'question-circle'" style="color: #CCCFD6;font-size: 20px;margin-left:20pt ;"></i>
        </span>
      </nz-header>
    </nz-layout>
  `,
  styles: [
      `
      .logo {
        width: 50px;
        height: 31px;
        background: rgba(255, 255, 255, 0.2);
        margin: 16px 24px 16px 0;
        float: left;
      }

      [nz-menu] {
        line-height: 64px;
      }

      nz-breadcrumb {
        margin: 16px 0;
      }

      nz-content {
        padding: 0 50px;
      }

      nz-footer {
        text-align: center;
      }

      .font1 {
        font-family: PingFangSC-Regular;
        font-size: 12px;
        color: #FFFFFF;
      }

      .font2 {
        font-family: PingFangSC-Regular;
        font-size: 12px;
        color: #CCCFD6;
      }
      li:hover{
        background-color: #282b33;
      }
    `
  ]
})
export class NzDemoLayoutTopComponent {
  list1: any[] = ['硬件管理中心', '虚拟机创建', 'IP地址修改'];
  list2: any[] = ['IP地址1', 'IP地址2', 'IP地址3', 'IP地址4'];
  constructor(private router: Router) { }
  doIn(): void {
    alert(1)
    this.router.navigateByUrl("user");
  }
}
